<template>
  <view class="orderForm">
    <!-- 订单信息 -->
    <view class="wzxx">
      <view class="xxs" style="height: 50px; align-items: center">
        <view>姓名</view>
        <uni-easyinput :inputBorder="false" :clearable="false" v-model="location.name" placeholder="请输入姓名" />
      </view>
      <view class="xxs" style="height: 50px; align-items: center">
        <view>联系方式</view>
        <uni-easyinput type="number" :inputBorder="false" :clearable="false" :maxlength="11" v-model="location.lxfs"
          placeholder="请输入手机号码" />
      </view>
    </view>
    <!-- 选择商品 -->
    <view class="select">
      <view class="lists">
        <view class="list_xx" v-if="spData">
          <image mode="aspectFill" :src="spData.image" />
          <view class="message">
            <view class="content">
              <view class="text">
                {{ spData.name }}
              </view>
              <view class="lbxx">
                <span class="sp2">￥{{ spData.vipPrice }}/{{ spData.size }}</span>
              </view>
              <view class="dzs"> x{{ number }} </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 总价 -->
    <view class="spzj">
      <view class="lis">
        <view>总价</view>
        <view>￥{{ totalPrice }}</view>
      </view>
    </view>

    <view class="spzj" v-if="spData.isBenefit == 1">
      <view class="lis">
        <view>定金(20%)</view>
        <view>￥{{ (totalPrice * 0.2).toFixed(2) }}</view>
      </view>
    </view>

    <!-- 支付方式 -->
    <PayWay @changeCode="handleChangeCode" :payUrl="payUrl" :isBenefit="spData.isBenefit" ref="payway"></PayWay>

    <!-- 提交订单 -->
    <view class="buts">
      <view class="service" @click="submitOrder">
        <span class="sp2">提交订单</span>
      </view>
    </view>
  </view>
</template>

<script>
import { spfindById } from '@/utils/api.js';
import PayWay from '@/components/payway/index';
import useHttp from '@/utils/http';
export default {
  components: {
    PayWay,
  },
  data() {
    return {
      id: '',

      spData: null,
      number: 0,
      location: {
        name: '',
        lxfs: '',
      },

      loading: false,
      orderInfo: {},
      providerList: [],

      payUrl: '',
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.number = e.number || 0;
    this.getData();
  },
  computed: {
    totalPrice() {
      if (this.spData) {
        return (Number(this.number) * Number(this.spData.vipPrice)).toFixed(2);
      } else {
        return '0.00';
      }
    },
  },
  methods: {
    handleChangeCode(payUrl) {
      console.log('%c [ payUrl ]-96', 'font-size:13px; background:pink; color:#bf2c9f;', payUrl);
      this.payUrl = payUrl;
    },
    async submitOrder() {
      if (!this.location.name || !this.location.lxfs) {
        uni.showToast({
          title: '请先填写姓名和联系方式',
          icon: 'none',
          duration: 2000,
        });

        return;
      }

      let res = await useHttp().post(this.payUrl, {
        id: this.id,
        number: this.number,
        remark: '',
        addressId: '',
        realName: this.location.name,
        userPhone: this.location.lxfs
      });

      if (res.code == 200) {
        console.log('res', res);
        if (res.data.paySign) {
          uni.requestPayment({
            timeStamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            package: res.data.package,
            paySign: res.data.paySign,
            signType: 'MD5',
            success: (result) => {
              console.log('result', result);
            },
            fail: (error) => {
              console.log('error', error);
            },
            complete: () => {
              uni.reLaunch({
                url: '/pages/order/details?id=' + res.data.productOrderId,
              });
            },
          });
        } else if (res.data.proOrder) {
          uni.showToast({
            title: '支付成功',
            duration: 2000,
            icon: 'none',
          });

          uni.reLaunch({
            url: '/pages/order/details?id=' + res.data.proOrder.id,
          });
        }
      }
    },
    // 获取数据
    async getData() {
      // 获取商品信息数据
      let res = await spfindById({
        id: this.id,
      });

      if (res.code === 200) {
        this.spData = res.data.product;
      } else {
        uni.showToast({ title: res.message, position: 'bottom' });
      }
    },

    // 提交订单
    rob() { },
  },
};
</script>

<style scoped lang="scss">
.orderForm {
  // width: 100%;
  padding: 8px 10px;

  .wzxx {
    padding: 10px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 10px;

    .xxs {
      display: flex;

      view {
        width: 80px;
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: $mainText;
        line-height: 50px;
      }

      image {
        width: 8px;
        height: 14px !important;
      }

      .uni-easyinput__placeholder-class {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }

      .uni-input-input {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }

      ::v-deep .is-disabled {
        background-color: #ffffff !important;
        color: #000;
      }

      ::v-deep .uni-data-checklist {
        height: 100%;

        .checklist-group {
          height: 100%;
          display: flex;
          justify-content: space-between;

          .checklist-box {
            margin: 0;
          }
        }
      }
    }

    .xxdz {
      display: flex;

      view {
        width: 80px;
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: $mainText;
        line-height: 40px;
      }
    }
  }

  .pickupaddress {
    border-radius: 10px;
    padding: 10px 20px;
    background-color: #fff;
    margin: 10px 0;

    .txt {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      color: $mainText;
      line-height: 30px;
    }

    .address {
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: $text;
      line-height: 23px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      view:nth-child(1) {
        width: 80%;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        /*要显示的行数*/
        -webkit-box-orient: vertical;
      }
    }
  }

  .select {
    padding: 20px 10px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 10px;

    .titles {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: $mainText;
      line-height: 50px;
    }

    .lists {
      width: 100%;

      .list_xx {
        width: 100%;
        // height: 110px;
        // margin-bottom: 10px;
        display: flex;

        image {
          width: 100px;
          height: 100px !important;
          border-radius: 8px;
        }

        .message {
          width: 64%;
          // height: 110px;
          padding: 0 10px;
          display: flex;

          .content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .text {
              width: 100%;
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              color: $mainText;
              line-height: 25px;
              font-weight: bold;
              overflow: hidden;
              display: -webkit-box;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              /*要显示的行数*/
              -webkit-box-orient: vertical;
            }

            .lbxx {
              width: 100%;
              font-size: 15px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999;
              line-height: 25px;

              .sp2 {
                font-size: 12px;
                margin-left: 10px;
              }
            }

            .dzs {
              margin-top: 5px;
              text-align: right;
              font-size: 15px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 18px;

              ::v-deep .uni-numbox {
                justify-content: flex-end;

                .uni-numbox__plus,
                .uni-numbox__minus {
                  width: 20px;
                  height: 20px;
                  background: #ffffff !important;
                  border-radius: 8px;
                  border: 1px solid #1e9b5e;
                  padding: 0 !important;

                  .uni-numbox--text {
                    color: #1e9b5e !important;
                  }
                }

                .uni-numbox__minus {}

                .uni-numbox__value {
                  width: 30px;
                  height: 20px;
                  background: #ffffff !important;
                  border-radius: 8px;
                  border: 1px solid #1e9b5e;
                  color: #1e9b5e !important;
                  margin: 0 5px;
                }
              }
            }
          }
        }
      }
    }
  }

  .spzj {
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 0 15px;

    .lis {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: $mainText;
      line-height: 50px;

      view:nth-child(2) {
        color: #ff0000;
      }
    }
  }

  .pays {
    padding: 0 10px 10px 10px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 100px;

    .titles {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: $mainText;
      line-height: 50px;
    }

    .zffs {
      height: 80px;
      display: flex;
      justify-content: space-between;

      .mode {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        view {
          display: flex;
          align-items: center;

          image {
            margin-right: 10px;
          }
        }
      }

      ::v-deep .uni-data-checklist {
        flex: 0;
        height: 100%;

        .checklist-group {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .checklist-box {
            margin: 0;
          }
        }
      }
    }
  }

  .buts {
    width: 100%;
    height: 110rpx;
    position: fixed;
    bottom: 50rpx;

    .service {
      width: 95%;
      height: 110rpx;
      background: linear-gradient(232deg, #b9d378 0%, #1b9a5d 100%);
      box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
      border-radius: 56rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .sp2 {
        font-size: 36rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 110rpx;
        padding: 0 10rpx;
      }
    }
  }

  .popup-content {
    height: 350px;
    background-color: #fff;

    .top {
      height: 50px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: $mainText;
      line-height: 50px;
      text-align: center;
      border-bottom: 1px solid #d4d4d4;
    }

    picker-view {
      width: 100%;
      height: 300px;
    }

    .item {
      line-height: 50px;
      text-align: center;
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: $mainText;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .item_active {
      color: #1d9b5d;
      font-size: 18px;
    }
  }
}
</style>
